<template>
  <div>
    <div
      style="height: 85px; border-bottom: 4px solid #409eff; padding-top: 5px"
    >
      <h1
        style="
          color: #409eff;
          display: inline;
          font-size: 48px;
          margin-left: 30px;
        "
      >
        机票预订系统
      </h1>
      <div
        style="
          float: right;
          height: 40px;
          line-height: 40px;
          margin-top: 16px;
          margin-right: 30px;
        "
      >
        <el-button
          plain
          style="
            margin-right: 10px;
            border: 0;
            font-size: 14px;
            line-height: normal;
          "
          @click="goToHomePage"
        >
          <i class="el-icon-s-home"></i>首页
        </el-button>

        <el-dropdown @command="handleDropdownCommand">
          <el-button
            round
            type="primary"
            plain
            style="padding: 4px 10px; width: auto; height: 45px"
          >
            <div class="btn-title">
              <div class="image-slot">
                <img :src="fullImageUrl()" class="avatar" />
              </div>
              <span class="username">用户：{{ userInfo.username }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <div class="btn-title" style="height: 100px">
                <div class="image-slot">
                  <img :src="fullImageUrl()" class="avatar-one" />
                </div>
                <div>
                  <el-button type="text" class="btn-user">
                    用户：{{ userInfo.username }}
                    <i class="el-icon-arrow-right el-icon--right"></i>
                  </el-button>
                  <el-tag size="medium">普通用户</el-tag>
                </div>
              </div>
            </el-dropdown-item>
            <el-dropdown-item command="personalCenter">
              <i class="el-icon-user"></i>个人中心
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              <i class="el-icon-switch-button"></i>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-button type="text" @click="goToMyOrder" style="margin: 0 20px">
          <span class="el-dropdown-link el-icon-tickets">
            订单详情
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        </el-button>
        <el-dropdown>
          <span class="el-dropdown-link el-icon-service">
            联系方式
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu
            slot="dropdown"
            style="font-size: 8px; line-height: 3em; padding-left: 6px"
          >
            境内：95010或 400-830-6666
            <br />中国香港：+852-3008-3295 <br />中国澳门：+86-21 3406-4888
            <br />中国台湾：+86-21 3406-4888 <br />其他国家和地区：+86-21
            3406-4888
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  name: "MyUse",
  data() {
    return {
      // 登录按钮相关属性
      userInfo: {
        username: "",
        avatar: "",
      },
    };
  },
  methods: {
    goToMyOrder() {
      //去我的订单页
      this.$router.replace("/myOrder");
    },
    goToPersonalCenter() {
      //去个人中心页面
      this.$router.replace("/personalCenter");
    },

    /* 下拉菜单命令 */
    handleDropdownCommand(command) {
      if (command === "logout") {
        this.logOut();
      } else if (command === "personalCenter") {
        this.goToPersonalCenter();
      }
    },
    goToHomePage() {
      //去首页
      //查询航班信息

      //切换组件
      // 处理账号登录
      this.$router.replace({
        name: "headerContent",
        params: {
          buttonState: "dropdown",
        },
      });
    },
    // 登出
    async logOut() {
      // 在这里提交表单
      await this.$axios
        .post("/api/user/logout")
        .then((res) => {
          if (res.data.code === 1) {
            localStorage.removeItem("userToken");
            this.$router.replace("/");
          } else if (res.data.code === 0) {
            this.$message.error("网络错误，稍后再试！");
          }
        })
        .catch((error) => {
          // 处理请求失败的错误
          this.$message.error(error.response.data.msg);
        });
    },
    // 获取用户昵称头像
    async selUserHeard() {
      // 在这里提交表单
      await this.$axios
        .post("/api/user/selHeard")
        .then((res) => {
          if (res.data.code === 1) {
            this.buttonState = "dropdown";
            this.userInfo = res.data.data;
          } else if (res.data.code === 0) {
          }
        })
        .catch((error) => {
          // 处理请求失败的错误
          this.$message.error(error.response.data.msg);
        });
    },
    //处理头像
    fullImageUrl() {
      if (this.isNullOrEmpty(this.userInfo.avatar)) {
        return require(`@/assets/noImg.png`);
      }
      return require(`@/assets/${this.userInfo.avatar}`); // 拼接完整的图片地址
    },
    //判断是否为空或null
    isNullOrEmpty(str) {
      return str == null || str.trim() === "";
    },
  },
  created() {
    //接收组件传过来的值
    const a = localStorage.getItem("userToken");
    if (a) {
      this.selUserHeard();
    }
  },
};
</script>
  
  <style scoped>
/* 登录样式 */
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
/* 订单样式 */
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

/* 登录按钮相关样式 */
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-one {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.username {
  font-size: 14px;
  line-height: normal;
}
.btn-title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-user {
  color: black;
  font-weight: bold;
  display: block;
  padding: 0;
  font-size: 14px;
}
.btn-user:hover {
  color: #409eff;
}
</style>
  